<template>
  <div class="level-box">
    <span class="level" :class="`secret-level-${value}`">{{ label }}</span>
  </div>
</template>

<script lang="ts" setup>
  import { watch, ref } from 'vue';

  const props = defineProps({
    record: {
      type: Object,
      default: () => {
        return {};
      },
    },
    value: {
      type: String,
      default: '',
    },
    label: {
      type: String,
      default: '',
    },
  });
  const value = ref(props.record.secretLevel || '');
  const label = ref(props.record.secretLevelName || '');
  watch(
    () => props,
    (n) => {
      if (n.value || n.label) {
        value.value = n.record[n.value];
        label.value = n.record[n.label];
      } else if (n.record) {
        value.value = n.record.secretLevel;
        label.value = n.record.secretLevelName;
      }
    },
    {
      immediate: true,
      deep: true,
    }
  );
</script>

<style lang="less" scoped>
  .level-box {
    width: 100%;
    .level {
      font-weight: 300;
      font-size: 12px;
      padding: 3px 8px;
      color: #ffffff;
      line-height: 20px;
      border-radius: 503px 503px 503px 503px;
    }
    .secret-level-7 {
      background: #7a0000;
    }
    .secret-level-6 {
      background: #7a0000;
    }
    .secret-level-5 {
      background: #d40000;
    }
    .secret-level-4 {
      background: #fe8624;
    }
    .secret-level-3 {
      background: #224ecd;
    }
    .secret-level-2 {
      background: #1e89ff;
    }
    .secret-level-1 {
      background: #1aa4ee;
    }
  }
</style>
